import { useEditorStore } from '@/store/editor';
import {
  BlockOutlined,
  CopyOutlined,
  DeleteOutlined,
  DownOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  UpOutlined,
} from '@ant-design/icons';
import { Button, Space, Tooltip } from 'antd';
import { FC } from 'react';

const EditorToolBar: FC = () => {
  const {
    selectedId,
    selectedComponentInfo,
    copiedComponentInfo,
    componentList,
    deleteById,
    showHidden,
    toggleLock,
    copy,
    paste,
    moveDown,
    moveUp,
  } = useEditorStore();
  const selectedIndex = componentList.findIndex(
    (item) => item.fe_id === selectedId
  );
  const isFirst = selectedIndex === 0;
  const isLast = selectedIndex === componentList.length - 1;

  function hiddenShow() {
    showHidden(selectedId);
  }

  return (
    <Space>
      <Tooltip title="删除">
        <Button shape="circle" icon={<DeleteOutlined onClick={deleteById} />} />
      </Tooltip>

      <Tooltip title="显示/隐藏">
        <Button
          shape="circle"
          icon={<EyeInvisibleOutlined />}
          onClick={hiddenShow}
        />
      </Tooltip>

      <Tooltip title="锁定">
        <Button
          shape="circle"
          icon={<LockOutlined />}
          type={selectedComponentInfo?.isLocked ? 'primary' : 'default'}
          onClick={() => toggleLock(selectedId)}
        />
      </Tooltip>

      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined />} onClick={copy} />
      </Tooltip>

      <Tooltip title="粘贴">
        <Button
          shape="circle"
          icon={<BlockOutlined />}
          onClick={paste}
          disabled={copiedComponentInfo === undefined}
        />
      </Tooltip>

      <Tooltip title="上移">
        <Button
          shape="circle"
          icon={<UpOutlined />}
          onClick={() => moveUp(selectedIndex)}
          disabled={isFirst}
        />
      </Tooltip>

      <Tooltip title="下移">
        <Button
          shape="circle"
          icon={<DownOutlined />}
          onClick={() => moveDown(selectedIndex)}
          disabled={isLast}
        />
      </Tooltip>
    </Space>
  );
};

export default EditorToolBar;
